<template>
  <div v-show="tableData.length" style="margin-bottom: 15px" class="committee_info">
    <div class="model_title gl_clear">
      <span class="gl_fl">运动员排行榜</span>
      <span class="title_control gl_fr">
        <img class="intergral_more_img" src="@/assets/images/league/mb_more.png" @click="jumpToScoreList">
      </span>
    </div>
    <ul>
      <template v-if="firstAthlete">
        <li class="model_content_first model_content gl_clear">
          <div class="integral_left gl_fl">
            <span class="integral_rank">{{ firstAthlete.finalRank }}</span>
            <img class="integral_photo" :src="getStaticFileUrl(firstAthlete.photoUrl)" @error="errorPhoto">
          </div>
          <div class="integral_info">
            <div class="integral_info_name gl_ellipsis">{{ firstAthlete.name }}</div>
            <div class="integral_info_address">
              <img class="address_icon" src="@/assets/images/league/mb_delegation.png" alt="">
              <span class="address_text gl_ellipsis">{{ firstAthlete.organization }}</span>
            </div>
            <div>
              <span class="integral_info_score">联赛积分 {{ firstAthlete.finalPoints }}</span>
            </div>
            <div class="integral_info_record gl_clear">
              <div class="gl_fl">
                <img class="integralResult_icon" src="@/assets/images/league/mb_result.png" alt="">
                <span class="integral_text result">{{ firstAthlete.winCount }}胜 / {{ firstAthlete.loseCount }}负</span>
              </div>
              <div class="gl_fl">
                <img class="integralPercent_icon" src="@/assets/images/league/mb_percent.png" alt="">
                <span class="integral_text">{{ (firstAthlete.winPercent * 100).toString().match(/^\d+(?:\.\d{0,2})?/)[0] }}%</span>
              </div>
            </div>
          </div>
        </li>
      </template>
      <li v-for="(item, index) in otherAthlete" :key="index" class="model_content_other model_content gl_clear">
        <div class="integral_left_other gl_clear">
          <span class="integral_rank gl_fl">{{ item.finalRank }}</span>
          <span class="integral_info_name gl_ellipsis gl_fl">{{ item.name }}</span>
          <span class="integral_info_score gl_fr">联赛积分 <span style="font-weight:500">{{ item.finalPoints }}</span></span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {
  api_GET_EventsManagementEventResultUnifiedPointRankList
} from '@/extend/api/gameswaggerApi/app';

import {
  Api_GET_EventsManagementEventResultUnifiedPointRankListQO
} from '@/lib/form/game/swaggerForm';

import defaultPhoto from '@/assets/images/face_default.png';
export default {
  props: {
    gameInfo: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data() {
    return {
      defaultPhoto: defaultPhoto, // 默认照片
      tableData: [],
      qo: new Api_GET_EventsManagementEventResultUnifiedPointRankListQO()
    };
  },
  computed: {
    firstAthlete() {
      return this.tableData[0] || null;
    },
    otherAthlete() {
      return this.tableData.slice(1, 5) || [];
    }
  },
  watch: {
    gameInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.id) {
          this.getPageList();
        }
      }
    }
  },
  methods: {
    // 获取页面数据
    getPageList () {
      const _qo = JSON.parse(JSON.stringify(this.qo));
      _qo.CompetitionId = this.gameInfo.id;
      _qo.Type = 'Register';
      _qo.Page = 1;
      _qo.SkipCount = 0;
      delete _qo.EventTypeCode;
      _qo.IncludeFinal = true;
      _qo.IncludeSubRank = true;
      this.apiRankList(_qo);
    },
    // UnifiedPointRankList
    apiRankList(qo) {
      api_GET_EventsManagementEventResultUnifiedPointRankList(qo)
        .then(
          res => {
            this.tableData = res.items;
            console.log(res);
          }
        )
        .catch(
          error => {
            console.log(error);
          }
        );
    },
    // 跳转至排行
    jumpToScoreList () {
      this.$emit('jumpToScoreList');
    },
    // 获取文件地址
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    errorPhoto() {
      const img = event.srcElement;
      img.src = this.defaultPhoto;
      img.onerror = null;
    }
  }
};
</script>

<style scoped>
.committee_info .committee_item {
  font-size: 14px;
  line-height: 20px;
  color: #666666;
  margin-top: 6px;
  box-sizing: border-box;
}
.committee_info .committee_name {
  line-height: 20px;
}
.committee_typeName {
  width: 70px;
  float: left;
}

.main_content .model_content {
  margin-bottom: 5px;
}
.model_content_first {
  padding: 18px 7px 18px;
}
.model_content_other {
  padding: 15px 10px 14px 7px;
}
.integral_left {
  display: flex;
  align-items: center;
}
.model_content_first .integral_left{
  padding-top: 8px;
}
.integral_info {
  margin-left: 108px;
}

.integral_info_name {
  box-sizing: border-box;
  width: 140px;
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  color: #000;
  line-height: 21px;
}
.model_content_first .integral_info_name {
  margin-bottom: 3px;
}
.integral_info_address {
  font-size: 13px;
  font-weight: 400;
  color: #666;
  line-height: 19px;
  margin-bottom: 5px;
}
.integral_info_score {
  display: inline-block;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  line-height: 21px;
  color: #c28e00;
  letter-spacing: 0px;
}
.model_content_first .integral_info_score {
  padding: 1px 8px;
  line-height: 19px;
  background: #fff3d1;
  border-radius: 5px;
  margin-bottom: 10px;
}
.integral_info_record {
  font-size: 14px;
  font-weight: 400;
  color: #333333;
  line-height: 20px;
}

.integral_rank {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 9px;
  margin-top: 2px;
  font-size: 14px;
  line-height: 18px;
  color: #E02020;
  text-align: center;
  background-color: #ffe7e7;
  border-radius: 50%;
}
.model_content_first .integral_rank {
  margin-top: 0;
}
.integral_photo {
  width: 70px;
  height: 80px;
  border-radius: 4px;
}
.title_control {
  font-size: 14px;
  font-weight: 500;
  color: #333333;
  line-height: 20px;
}
.intergral_more_img {
  width: 20px;
  height: 20px;
  vertical-align: middle;
}

.address_icon {
  width: 16px;
  height: 14px;
  margin-right: 9px;
  vertical-align: top;
}
.address_text {
  width: calc(100% - 30px);
  display: inline-block;
  vertical-align: top;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  color: #666666;
  line-height: 19px;
}
.integralResult_icon {
  width: 17px;
  height: 18px;
  margin-right: 6px;
  vertical-align: top;
}
.integralPercent_icon {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  vertical-align: top;
}
.integral_text {
  display: inline-block;
  vertical-align: top;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  color: #333333;
  line-height: 20px;
}
.integral_text.result {
  width: 100px;
}
</style>
